import React, { FC, MutableRefObject, useState, useImperativeHandle, forwardRef, useRef } from 'react';
import { Modal, Button } from 'antd';
import { NewModalContent } from './newModalContent'
/**
 * @param type 展示 model 类型
 * @param callbackItem model 确认之后返回值 
 */
export interface homeModalProps {
  type: string;
  ref: MutableRefObject<null>
}

const HomeModal = forwardRef((props: homeModalProps, _ref) => {
  const { type = "新增" } = props;
  const [isModalOpen, setIsModalOpen] = useState(false);
  const newContentRef = useRef();

  const handleOk = () => {
    if (newContentRef.current as any) {
      (newContentRef.current as any).childForm.validateFields().then((values: any) => {
        console.log(values, 'values');
      }).catch((err: any) => {
        console.log("错误信息：", err);
      })
    }

    // setIsModalOpen(false);
  }

  const handleCancel = () => {
    setIsModalOpen(false);
    if (newContentRef.current as any) {
      (newContentRef.current as any).childForm.resetFields();
    }
  }

  const callbackItem = (type: string, item: any) => { };

  useImperativeHandle(_ref, () => {
    return {
      isModalOpen,
      setIsModalOpen,
      callbackItem
    }
  })

  const GetModalView = (type: string) => {
    switch (type) {
      case "新增":
        return (
          <Modal
            title={type}
            open={isModalOpen}
            onOk={handleOk}
            onCancel={handleCancel}
            width={800}
            footer={false}
          >
            <>
              <NewModalContent ref={newContentRef} />
              <div className='newContentformBtn'>
                <Button className='closeBtn' onClick={handleCancel}>关闭</Button>
                <Button type='primary' onClick={handleOk}>提交</Button>
              </div>
            </>
          </Modal>
        )
      case "编辑":
        return (
          <Modal
            title={type}
            open={isModalOpen}
            onOk={handleOk}
            onCancel={handleCancel}
            width={800}
            footer={false}
          >
            <>
              <NewModalContent ref={newContentRef} />
              <div className='newContentformBtn'>
                <Button className='closeBtn' onClick={handleCancel}>关闭</Button>
                <Button type='primary' onClick={handleOk}>提交</Button>
              </div>
            </>
          </Modal>
        )
      case "删除":
        return (
          <Modal
            title={type}
            open={isModalOpen}
            onOk={handleOk}
            onCancel={handleCancel}
          >
            <>{type}</>
          </Modal>
        )
      case "查看详情":
        return (
          <Modal
            title={type}
            open={isModalOpen}
            onCancel={handleCancel}
            width={800}
            footer={false}
          >
            <>
              <NewModalContent ref={newContentRef} />
            </>
          </Modal>
        )
      default: return null;
    }
  }

  return (
    <div>{GetModalView(type)}</div>
  )
});

export { HomeModal };